<template>
  <header>
    <h1>在线商城后台管理系统</h1>
    <img :src="'http://localhost:9191'+user.avatarUrl">
    <el-menu
    :collapse=false
    class="caidan"
    background-color="#2a2a33"
    text-color="white"
    active-text-color="#ffd04b"
    >

    <el-sub-menu index="2">
        <template #title>{{user.role}}</template>
        <el-menu-item index="2-1">修改密码</el-menu-item>
        <el-menu-item index="2-2" @click="tui()">退出登录</el-menu-item>
    </el-sub-menu>
    </el-menu>
  </header>
</template>

<script setup>
import router from "@/router";
import { onMounted, ref } from "vue";

const tui=()=>{
    localStorage.clear();
    router.push('/admin')
}
const user=ref({})
onMounted(()=>{
    const username= localStorage.getItem("user");
    if(username){
        user.value=JSON.parse(username)
    }
    console.log(user);
})



</script>

<style scoped>
header{
    width: 100%;
    height: 13%;
    background-color: #2a2a33;
    color: white;
    display: flex;
    text-align: center;
    align-items: center;
    position: relative;
}
h1{
    color: gold;
    font-weight: normal;
    text-align: center;
    line-height: 50px;
    height: 50px;
    margin-left: 20px;
}
header img{
    width: 55px;
    height: 55px;
    position: absolute;
    right: 137px;
}
header .caidan{
    position: absolute;
    right: 20px;
    top: 3%;
    background-color: #2a2a33;
    border: none;
}
</style>